<template>
  <div class="profession-statistics">
    <nanning-screen-border-box :bgImg="bgImg">
      <screen-title>从业人员统计</screen-title>
      <div class="chart-box">
        <div class="pie-chart">
          <screen-chart @initCb="initChart"></screen-chart>
          <div class="legend">
            <div class="legend-item" v-for="(v, k) in chartData" v-bind:key="k">
              <div class="legend-img">
                <img :src="legends[k]" alt="">
              </div>
              <div class="legend-title">{{v.name}}</div>
              <div class="legend-value">
                <div class="legend-num">{{v.value}}</div>
                <div class="legend-percent">26%</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="icon-box">
        <div class="icon-item" v-for="(v, k) in data" v-bind:key="k" :style="`background: url(${iconbg}) no-repeat center center; background-size: 100% 100%;`">
          <img class="icon" :src="icons[k]" alt="">
          <div class="item-text">
            <div class="item-value">{{v.value}}</div>
            <div class="item-name">{{v.name}}</div>
          </div>
          <div class="item-percent">
            <img class="percent-bg" :src="percentBg" alt="">
            <div class="percent-value">{{getPercent(v.value)}}%</div>
          </div>
        </div>
      </div>
    </nanning-screen-border-box>
  </div>
</template>

<script lang="ts">
import { pieOptions } from './options'
import { Component, Vue } from 'vue-property-decorator'
@Component({
  name: 'profession-statistics'
})
export default class ProfessionStatistics extends Vue {
  private bgImg: string = require('assets/images/box-border-2.png')
  private legendBlue: string = require('assets/images/blue.png')
  private legendGreen: string = require('assets/images/green.png')
  private legendOrange: string = require('assets/images/orange.png')
  private iconbg: string = require('assets/images/tubiaoby.png')
  private shangfang: string = require('assets/images/jiashiyuan@2x.png')
  private shedu: string = require('assets/images/zhiyuanzhe@2x.png')
  private chuanxiao: string = require('assets/images/baoan@2x.png')
  private shekong: string = require('assets/images/qita@2x.png')
  private percentBg: string = require('assets/images/bafenbi@2x.png')
  private icons = [this.shangfang, this.shedu, this.chuanxiao, this.shekong]
  private legends = [this.legendBlue, this.legendGreen, this.legendOrange]
  private chartData: any = [{
    name: '从业人员',
    value: 17513
  }, {
    name: '重点人员',
    value: 6722
  }, {
    name: '其他人员',
    value: 6510
  }]

  private data: any = [{
    name: '上访人员',
    value: 412
  }, {
    name: '涉毒人员',
    value: 273
  }, {
    name: '传销人员',
    value: 166
  }, {
    name: '社恐人员',
    value: 148
  }]

  private getPercent(value: any) {
    let total = 0
    this.data.forEach((item: any) => {
      total += item.value
    })
    return (value / total * 100).toFixed(0)
  }

  private avaChart: any = null

  private initChart(chart: any): void {
    this.avaChart = chart
    chart.clear()
    setTimeout(() => {
      this.avaChart.setOption(pieOptions({ data: this.chartData }))
    }, 200)
  }
}
</script>

<style lang="scss" scoped>
.profession-statistics {
  width: 100%;
  height: 53.19%;
  .chart-box {
    height: 55%;
    display: flex;
    align-items: center;
    justify-content: center;
    .pie-chart {
      width: 100%;
      height: 100%;
      padding: 0px 2px;
      box-sizing: border-box;
      position: relative;
      .legend {
        position: absolute;
        top: 0;
        right: 8%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        height: 100%;
        width: 28%;
        opacity: 1;
        .legend-item {
          width: 100%;
          position: relative;
          // margin-bottom: 10%;
          .legend-img {
            width: 100%;
            height: 10px;
            border: 1px dotted rgba($color: #bbb, $alpha: 0.8);
            img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }
          .legend-title {
            color: #eff0f1;
            font-size: 14px;
            position: absolute;
            top: -12px;
            left: 10px;
          }
          .legend-value {
            color: #fff;
            display: flex;
            margin-top: 8%;
            align-items: flex-end;
            justify-content: space-between;
            .legend-num {
              color: #ffffff;
              font-size: 20px;
              margin-left: 8px;
            }
            .legend-percent {
              color: #ffffff;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
  .icon-box {
    width: 100%;
    height: calc(100% - 55% - 50px);
    padding: 0 10px 0 30px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-around;
    .icon-item {
      width: 49%;
      height: 60px;
      position: relative;
      display: flex;
      align-items: center;
      margin-bottom: 3%;
      overflow: hidden;
      .icon {
        width: 16%;
        height: 56%;
        margin-left: 20px;
      }
      .item-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-left: 12px;
        .item-value {
          font-size: 20px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
        }
        .item-name {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #ffffff;
        }
      }
      .item-percent {
        width: 23%;
        height: 85%;
        margin-left: 10%;
        position: relative;
        .percent-bg {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
        }
        .percent-value {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #3efff4;
          height: 100%;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>
